@import "_base";
.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.a {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em .8em .5em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .3em;
  -moz-border-radius: .3em;
  border-radius: .3em;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.a:hover {
  text-decoration: none;
}
.a:active {
  position: relative;
  top: 1px;
}
.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.black {
  color: #fef4e9;
  border: solid 1px rgb(0,0,0);
  background: rgb(9,9,9);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(9,9,9)),to(rgb(94,94,94)));
  background: -moz-linear-gradient(top,  rgb(9,9,9),  rgb(94,94,94));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(9,9,9)', endColorstr='rgb(94,94,94)');
}
.black:hover {
  background: rgb(0,0,0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(0,0,0)), to(rgb(50,50,50)));
  background: -moz-linear-gradient(top,  rgb(0,0,0),  rgb(50,50,50));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(0,0,0)', endColorstr='rgb(50,50,50)');
}
.black:active {
  color: #fef4e9;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(94,94,94)), to(rgb(9,9,9)));
  background: -moz-linear-gradient(top,  rgb(94,94,94),  rgb(9,9,9));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(94,94,94)', endColorstr='rgb(9,9,9)');
}
.3dlogin{
    position: relative;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    background-color: rgba(219, 87, 51, 1);
    font-family: "Microsoft YaHei", 微软雅黑, 宋体;
    font-weight: 700;
    font-size: 0.2rem;
    display: block;
    padding: 4px;
    border-radius: 8px;
    /* let's use box shadows to make the button look more 3-dimensional */
    box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
    margin: 50px auto;
    width: 60px;
    text-align: center;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    &:active{
      box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
      position: relative;
      top: 6px;
    }
  }
  //放射性
@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 8px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}
//放射性
@-webkit-keyframes redPulse{
  from { background-color: darken($colorred,1%); -webkit-box-shadow: 0 0 9px $colorred; }
  50% { background-color:lighten($colorred,20%);  -webkit-box-shadow: 0 0 8px lighten($colorred,20%); }
  to { background-color: darken($colorred,1%); -webkit-box-shadow: 0 0 9px $colorred;  }
}
//放射性
@-webkit-keyframes greenSPulse {
  from { background-color: darken($colorgreen,1%); -webkit-box-shadow: 0 0 9px $colorgreen; }
  50% { background-color:lighten($colorgreen,20%);  -webkit-box-shadow: 0 0 8px lighten($colorgreen,20%); }
  to { background-color: darken($colorgreen,1%); -webkit-box-shadow: 0 0 9px $colorgreen;  }
}
//放射性
@-webkit-keyframes bulePulse {
  from { background-color: darken($colorbule,1%); -webkit-box-shadow: 0 0 9px $colorbule; }
  50% { background-color:lighten($colorbule,20%);  -webkit-box-shadow: 0 0 8px lighten($colorbule,20%); }
  to { background-color: darken($colorbule,1%); -webkit-box-shadow: 0 0 9px $colorbule;  }
}
//放射性
@-webkit-keyframes buledPulse {
  from { background-color: darken($colordbule,1%); -webkit-box-shadow: 0 0 9px $colordbule; }
  50% { background-color:lighten($colordbule,20%);  -webkit-box-shadow: 0 0 8px lighten($colordbule,20%); }
  to { background-color: darken($colordbule,1%); -webkit-box-shadow: 0 0 9px $colordbule;  }
}
//放射性
@-webkit-keyframes orangePulse {
  from { background-color: darken($colororgan,1%); -webkit-box-shadow: 0 0 9px $colororgan; }
  50% { background-color:lighten($colororgan,20%);  -webkit-box-shadow: 0 0 8px lighten($colororgan,20%); }
  to { background-color: darken($colororgan,1%); -webkit-box-shadow: 0 0 9px $colororgan;  }
}
//放射性
@-webkit-keyframes whitePulse {
  from { background-color: darken($color10,1%); -webkit-box-shadow: 0 0 9px $color10; }
  50% { background-color:lighten($color10,20%);  -webkit-box-shadow: 0 0 8px lighten($color10,20%); }
  to { background-color: darken($color10,1%); -webkit-box-shadow: 0 0 9px $color10;  }
}
//放射性
@-webkit-keyframes qinPulse {
  from { background-color: darken($color13,1%); -webkit-box-shadow: 0 0 9px $color13; }
  50% { background-color:lighten($color13,20%);  -webkit-box-shadow: 0 0 8px lighten($color13,20%); }
  to { background-color: darken($color13,1%); -webkit-box-shadow: 0 0 9px $color13;  }
}
a.green.button {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}

a.red.button {
  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}
a.green.a {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}
a.red.a {
  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}
a.greens.a {
  -webkit-animation-name: greenSPulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}
a.oranges.a {
  -webkit-animation-name: orangePulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}a.qin.a {
   -webkit-animation-name: qinPulse;
   -webkit-animation-duration: 8s;
   -webkit-animation-iteration-count: infinite;
 }
a.white.a {
  color: #2e353b;
   -webkit-animation-name: whitePulse;
   -webkit-animation-duration: 8s;
   -webkit-animation-iteration-count: infinite;
 }
a.blued.a {
  -webkit-animation-name: buledPulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}
a.blue.a {
  -webkit-animation-name: bulePulse;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
}


